<template>
  <PlaylistHeader :Songinfo="Songinfo.Info.playlist"  :userInfo="Songinfo.userInfo.profile" v-if="Songinfo.flag"></PlaylistHeader>
  <SongList :Songinfo="Songinfo.List.songs" v-if="Songinfo.flag"></SongList>
  <loading v-if="!Songinfo.flag"></loading>
</template>
<script>
import PlaylistHeader from "@/components/PlaylistHeader/PlaylistHeader";
import SongList from "@/components/SongList/SongList";
import {useRouter} from "vue-router";
import {onMounted, reactive} from "vue";
import {getPlayListInfo, getPlaylistSong, getUserInfo} from "../../../HTTP/api";
import {emitter} from "@/eventBus/mitter";
import Loading from "@/view/Load/Loading";
export default {
  name: "SongListDetails",
  components: {
    Loading,
    PlaylistHeader,
    SongList
  },
  setup() {
    const router = useRouter()
    const Songinfo = reactive({
      List: "",
      flag: false,
      Info: "",
      userInfo: ''
    })
    onMounted(async () => {
      let id = router.currentRoute.value.query.id
      Songinfo.List = await getPlaylistSong(id) //获取歌曲
      Songinfo.Info = await getPlayListInfo(id)//获取歌单信息
      let uid=Songinfo.Info.playlist.userId
      // console.log(uid)
      Songinfo.userInfo=await getUserInfo(uid)
      Songinfo.flag = true
    })
    return {
      Songinfo,
    }
  }
}
</script>

<style scoped>

</style>